
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
     
    <link rel="stylesheet"  href="user.css">
    <script src="./static/js/vue.global.js"></script>

   
        <link rel="stylesheet" href="./static/element-plus/index1.css" />
        <script src="./static/element-plus/index.full.js"></script>
 <style>
    .main{
        width: 1200px;
        margin: 0 auto;
    }
    #a1{
        width: 150px;
        height: 250px;
        background-color: white;
        position: relative;
        left: 150px;
        float: left;
    }
    #a2{
        width: 700px;
        height: 120px;
        float: left;
        background-color: white;
        position: relative;
        left: 170px;
    }
    ul{
        list-style: none;
        margin: 15px;
        padding: 15px;
        line-height: 35px;
    }
    ul li:hover{
        color: blue;
    }
 </style>
</head>
<body>
    <div id="app">
        
            <el-container style=" background-color: #f5f5f5;">
              
            <el-header style=" background-color: #fff;">
                <el-row style="display: flex;align-items:center">
                <el-col :span="4" style="display: flex;">
                     <div>
                          <el-image style="width: 60px; height:60px" src="./static/img/logo.png" :fit="fit">
                   
                     </div>    
                     <div>
                        <h1 style="padding-left:20px;">技术社区</h1>
                     </div>
                
                </el-col>
                    <el-col :span="8">
                        <el-menu mode="horizontal" style="border:0!important;margin-top:-10px ;">
                            <el-menu-item>首页</el-menu-item>
                            <el-menu-item>文章</el-menu-item>
                            <el-menu-item>课程</el-menu-item>
                            <el-menu-item>商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8">
                        <el-input style="width: 200px;" placeholder="请输入关键字"></el-input>
                    </el-col>
                    <el-col :span="4" >
                        <div>
                            <div width="50px" height="50px" style="border:1px solid black;border-radius:10;"></div>
                        </div>
                        
                        
                    </el-col>
                   </el-row>
            </el-header>
                <el-main class="main" style="height:480px;">
                 <el-col :span="10">
                        <div id="a1">
                               <ul>
                                <li>个人主页</li>
                                <li>个人资料</li>
                                <li>账号设置</li>
                                <li>消息设置</li>
                                <li>标签管理</li>
                                <li>后台管理</li>
                               </ul>
                        </div>
                 </el-col>
                 <el-col>
                    <div id="a2">
                          <div style="width: 50px; height:50px;
                          background-color: gray;
                          border-radius: 50px;
                          margin:25px;
                          float: left;"></div>
                          <div style="float:left;"><h3>admin<br><h5>性别:男|岗位:前端开发工程师<br>
                         签名档:代码千万行,注释第一行;开发不规范,同事两行泪。</h5></h3></div>
                    </div>
                    <div style="width:700px;height: 300px; background-color: white;
                    position:relative;left:320px;clear: both;top: -120px;">

                    </div>
                 </el-col>
                </el-main>
                 <el-footer style="height: auto;">
                         <el-row>
                            <el-col :span="8">
                                <div>
                                <el-image style="width: 60px; height:60px" src="./static/img/logo.png" :fit="fit">
                                </div>
                               <div style="position: relative; left: 70px; bottom: 80px;">   
                                  <h1 style="padding: 0 20px;">技术社区</h1>
                                  <p>致力于构建一个专业胡IT技术交流社区</p>
                              </div>
                            </el-col>
                            <el-col :span="8" style="display: flex;flex-direction:column;justify:">
                                <div>
                                    <el-button type="text">首页</el-button>
                                    <el-button type="text">文章</el-button>
                                    <el-button type="text">课程</el-button>
                                    <el-button type="text">商城</el-button>
                                </div>
                                <div>
                                    <el-button type="text">关于我们</el-button>
                                    <el-button type="text">使用手册</el-button>
                                    <el-button type="text">隐私条款</el-button>
                                    <el-button type="text">建议反馈</el-button>
                                </div>
                            </el-col>
                            <el-col :span="8">
                            <h1>联系我们</h1>
                            <div><P>电话:12345678</P>
                            <p>邮箱:software@develop.com</p></div>
                            </el-col>
                         </el-row>
                         <div style="height:50px;line-height:50px;text-align:center;background-color:#409EFF">软件开发工作室版权所有</div>
                </el-footer>
            </el-container>
           
          
    </div>
</body>
  <script>
       const App={
        data(){
   return{
   
    isShow:false,
   }
        },
        methods:{

        }
       }
       Vue.createApp(App).use(ElementPlus).mount("#app")
  </script>
</html>